// 购物车页面的逻辑

// 0. 获取元素
const contentBox = document.querySelector('section')

// 1. 拿到 id 和 token, 验证是否存在
// 验证是否真实, 如果有问题, 直接跳转回到 login 页面
const id = window.localStorage.getItem('id')
const token = window.localStorage.getItem('token')
loginTest()
async function loginTest() {
    if (!id || !token) {

        // 把页面的标识信息存储起来
        window.localStorage.setItem('url', 'car')

        // 跳转页面
        window.location.href = './login.html'
        return
    }

    ajax({
        url: 'http://localhost:8888/cart/list',
        data: `id=${id}`,
        dataType: 'json',
        token,
        success: res => {
            console.log('res',res);
            // 2-3. 判断登录过期
            if (res.code !== 1) {
                // 把页面的标识信息存储起来
                window.localStorage.setItem('url', 'cat')

                // 跳转页面
                window.location.href = './login.html'
                // 2-4. 渲染页面
                return
            }
            bindHtml(res)
        }
    })

}

// 3. 渲染页面的函数
function bindHtml(res) {
    const { cart } = res
    // console.log(cart);
    // 3-1. 提前计算出一些内容
    // 3-1-1. 计算有多少个选中的
    // 从 cart 里面筛选出来所有 is_select 为 true 的
    // console.log(cart);
    const selectArr = cart.filter(item => item.is_select === true)
    const selectNum = selectArr.length
    // console.log(selectNum);
    // 3-1-2. 计算购买数量和总价
    // 从 cart 里面少选出来所有 is_select 为 true 的
    let totalPrice = 0
    let totalNum = 0
    selectArr.forEach(item => {
        totalPrice += item.current_price * item.cart_number
        totalNum += item.cart_number
    })

    let str = `
    <ul class="progress">
            <li>
                <div class="num">1</div>
                <p>查看购物车</p>
                <p class="arrow">></p>
            </li>
            <li>
                <div>2</div>
                <p>订单确认</p>
                <p class="arrow">></p>
            </li>
            <li>
                <div>3</div>
                <p>订单支付</p>
            </li>
        </ul>
        <ul class="th">
            <li>配送方式</li>
            <li class="goods">商品信息</li>
            <li class="goods">尺码颜色</li>
            <li>价格</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
        </ul>
    `

    res.cart.forEach(item => {
        str += `
        <div class="send">
            <input class="item" data-id="${ item.goods_id }" type="checkbox">
            <span>快递配送</span>
        </div>
        <!-- 商品信息 -->
        <ul class="information">
            <li class="in_send">
            <input type="checkbox">
            <span>修改配送方式</span>
            </li>
            <li class="goods">
                <img src="${ item.img_small_logo }" alt="">
            <div>
            <p>${ item.title }</p>
            <p class="return">支持30天无理由退换货</p>
            </div>
            </li>
            <li class="goods">
                <p>尺码：165</p>
                <p>颜色</p>
            </li>
            <li class="price">
                <p>${ item.current_price }</p>
                <p class="og_price">初上市价格</p>
                <p class="og_price">${ item.price }</p>
            </li>
            <li class="nums">
                <div>
                    <button class="numAdd" data-id="${ item.goods_id }">+</button>
                    <input type="text" value="${ item.cart_number }">
                    <button class="numSub" data-id="${ item.goods_id }">—</button>
                </div>
            </li>
            <li class="price">
                <p>${ (item.current_price * item.cart_number).toFixed(2) }</p>
            </li>
            <li>
                <p class="del bksp"  data-id="${ item.goods_id }">删除</p>
            </li>
        </ul>
        <div class="blank"></div>
    `
    })

    str += `
    <div class="settlement">
        <div>
            <input type="checkbox" class="selectAll">
            <p class="selectAll" type="checkbox" ${ selectNum === cart.length ? 'checked' : '' }>全选</p>
            <p ${ cart.length ? '' : 'disabled' } class="clear">删除</p>
            <p>移入收藏夹</p>
        </div>
        <p>总价(不含运费):
            <span>${ totalPrice.toFixed(2) }</span>
        </p>
        <button class="activity" ${ selectNum ? '' : 'disabled' }>立即结算</button>
    </div>
    `

    // 插入到页面内部
    contentBox.innerHTML = str
    // console.log(str);
}

// 4. 各种点击事件
// 事件委托
contentBox.addEventListener('click', async e => {
    e = e || window.event
    const target = e.target || e.srcElement

    // 判断点击的是单选按钮
    if (target.className === 'item') {
        // 拿到 id
        const goodsId = target.dataset.id
        ajax({
            url: 'http://localhost:8888/cart/select',
            token,
            data: `id=${id}&goodsId=${goodsId}`,
            dataType: 'json',
            method: 'POST',
            success: res => {
                // 从新渲染页面
                loginTest()
        }
        })
    }

    // 判断全选按钮
    if (target.className === 'selectAll') {
        // 拿到当前这个按钮的选中状态
        const type = target.checked ? 1 : 0

        // 发送请求
        ajax({
            url: 'http://localhost:8888/cart/select/all',
            data: `id=${id}&type=${type}`,
            token,
            dataType: 'json',
            method: 'post',
            success: res => {
                // 修改完成从新请求数据
                loginTest()
        }
        })
    }

    // 判断点击的是数量 ++
    if (target.className === 'numAdd') {
        // 拿到元素身上的自动以属性
        const goodsId = target.dataset.id

        // 拿到购买的数量
        const num = target.nextElementSibling.value - 0 + 1
        console.log(num);
        // 发送请求
        ajax({
            url: 'http://localhost:8888/cart/number',
            token,
            data: `id=${id}&goodsId=${goodsId}&number=${num}`,
            dataType: 'json',
            method: 'POST',
            success: res => {
                       // 从新请求数据
                loginTest()
        }
        })
    }

    // 判断点击的是数量 --
    if (target.className === 'numSub') {
        // 拿到元素身上的自动以属性
        const goodsId = target.dataset.id

        // 拿到购买的数量
        const num = target.previousElementSibling.value - 0 - 1

        // 判断一下, 如果 num === 0 什么也不做
        if (num <= 0) return

        // 发送请求
        ajax({
            url: 'http://localhost:8888/cart/number',
            token,
            data: `id=${id}&goodsId=${goodsId}&number=${num}`,
            dataType: 'json',
            method: 'POST',
            success: res => {
                // 从新请求数据
        loginTest()
        }
        })
    }

    // 判断点击的是删除按钮
    if (target.className === 'del') {
        // 拿到元素身上的自定义属性
        const goodsId = target.dataset.id

        // 直接发送请求
        ajax({
            url: 'http://localhost:8888/cart/remove',
            data: `id=${id}&goodsId=${goodsId}`,
            token,
            dataType: 'json',
            success: res => {
                // 从新请求数据
        loginTest()
        }
        })
    }

    // 判断点击的是删除所有已选中
    if (target.className === 'clear') {
        // 直接发送请求
        ajax({
            url: 'http://localhost:8888/cart/remove/select',
            data: `id=${id}`,
            token,
            success: res => {
                // 从新请求数据
        loginTest()
        }
        })
    }
})